<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>首页</title>
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="css/zui.min.css">
    <script> if (typeof module === 'object') {window.module = module; module = undefined;} //为了让本地electron能够正确加载js代码所需要的文件</script>
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="lib/jquery/jquery.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="js/zui.min.js"></script>
    <script src="js/vue.js"></script>
    <link href="lib/treemap/zui.treemap.min.css" rel="stylesheet">
    <script src="lib/treemap/zui.treemap.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <script src="layui/layui.js" charset="utf-8"></script>
    <script src="js/dist/xlsx.full.min.js"></script>
    <script src="js/dist/shim.min.js"></script>
    <script>if (window.module) module = window.module;</script>
</head>

<body>
    <div id="app">
        <nav class="navbar " role="navigation">
            <div class="container-fluid">
                <!-- 导航头部 -->
                <div class="navbar-header">
                    <!-- 移动设备上的导航切换按钮 -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-collapse-example">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- 品牌名称或logo -->
                    <a class="navbar-brand" href="#">危害分析软件</a>
                </div>
                <!-- 导航项目 -->
                <div class="collapse navbar-collapse navbar-collapse-example">
                    <!-- 一般导航项目 -->
                    <ul class="nav navbar-nav">
                        <li id="idHome" @click="toPage('home')"><a>故障树首页</a></li>
                        <li id="idFunEa" @click="toPage('ea')"><a>EA分析</a></li>
                        <li id="idFunCa" @click="toPage('ca')"><a>CA分析</a></li>

                        <!-- 导航中的下拉菜单 -->
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a>任务</a></li>

                            </ul>
                        </li>
                    </ul>
                </div><!-- END .navbar-collapse -->
            </div>
        </nav>



        <!--内容开始-->
        <div class="container-fluid" id="page1" style="padding:10px;display: none"> </div>
        <div class="container-fluid" id="page2" style="padding:10px;display: none"> </div>
        <div class="container-fluid" id="page3" style="padding:10px;display: none"> </div>

        <!--内容，使用post动态加载-->
    </div>

    <!--脚本位置-->
    <script>
        $.get("page/pageHome.html", {}, function (result) {
            $("#page1").html(result)
        })

        $.get("page/pageEA.html", {}, function (result) {
            $("#page2").html(result)
        })
        $.get("page/pageCA.html", {}, function (result) {
            $("#page3").html(result)
        })
        var vm = new Vue({
            el: "#app",
            data: {
                selected: "",
                pstrFunction: "", //元器件的功能
                title: "",//元器件的名字
                pstr1_1: "", //第一个plane的故障原因和影响
                pstr1_2: "",
                pstr2_1: "", //第2个plane的故障原因和影响
                pstr2_2: "",
                pstr3_1: "", //第3个plane的故障原因和影响
                pstr3_2: "",
                items: [], //储存元器件的总表
                system: []//系统级别
            },
            methods: {
                toPage: function (page) {
                    if (page == "home") {
                        $("#page1").show()
                        $("#page2").hide()
                        $("#page3").hide()
                    }
                    if (page == "ea") {
                        $("#page1").hide()
                        $("#page2").show()
                        $("#page3").hide()
                    }
                    if (page == "ca") {
                        $("#page1").hide()
                        $("#page2").hide()
                        $("#page3").show()
                    }
                }

            }
        })
        vm.toPage("home")


      
    </script>

</body>

</html>